<html>
<title>组件的单向数据流</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="container">
        <my-a></my-a>
        <my-b></my-b>
    </div>
    
    <template id="a">
        <div>
            <button @click="send">值传递给B组件</button>
        </div>
    </template>

    <template id="b">
        <div>
            <h3>{{ name }}</h3>
        </div>
    </template>

    <script>
        var Event = new Vue();
        var A = {
            template: '#a',
            data() {
                return {
                    name: "tom"
                }
            },
            methods: {
                send() {
                    Event.$emit('data-a', this.name);
                }
            }
        }
        var B = {
            template: '#b',
            data() {
                return {
                    name: ""
                }
            },
            mounted() {
                Event.$on('data-a', name => {
                    this.name = name;
                })
            }

        }
        var vm = new Vue({
            el: "#container",
            components: {
                'my-a': A,
                'my-b': B
            }
        });
    </script>

</body>

</html>